<template>
  <div class="h_full flexcolumn">
    <template v-if="!ishangUp">
      <div class="w_tool flexbetween">
        <div class="flex">
          <el-tooltip
            class="item"
            effect="dark"
            content="表情"
            placement="top-start"
          >
            <EmojiPop @chooseEmoji="chooseEmoji" class="toolemj" />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="图片"
            placement="top-start"
          >
            <div class="p_relative">
              <svg-icon
                class-name="mr-16 icontool commhover"
                icon-class="itool2"
              />
              <input
                type="file"
                id="pageData"
                class="uploadimg"
                accept="image/*"
                @change="upload($event,1)"
              />
            </div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="文件"
            placement="top-start"
          >
            <div class="p_relative">
              <svg-icon
                class-name="mr-16 icontool commhover"
                icon-class="itool3"
              />
              <input
                type="file"
                id="pageData"
                class="uploadimg"
                accept="image/*"
                @change="upload($event,2)"
              />
            </div>
            <!-- <svg-icon
              class-name="mr-16 icontool commhover"
              icon-class="itool3"
            /> -->
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="图文链接"
            placement="top-start"
          >
            <svg-icon
              class-name="mr-16 icontool commhover"
              icon-class="itool4"
              @click="handleOpen('link')"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="素材库"
            placement="top-start"
          >
            <svg-icon
              class-name="mr-16 icontool commhover"
              icon-class="itool5"
              @click="handleOpen('material')"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="邀请入群"
            placement="top-start"
          >
            <svg-icon
              class-name="mr-16 icontool commhover"
              icon-class="itool6"
              @click="handleOpen('group')"
            />
          </el-tooltip>
        </div>
        <div class="flex aligncenter">
          <div class="f-12 c_text3">
            提示模式:
            <el-switch
              class="nobodersw"
              v-model="isTip"
              inactive-color="rgba(0,0,0,.25)"
              @change="handleTip"
            ></el-switch>
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            content="挂起"
            placement="top-start"
          >
            <svg-icon
              class-name="ml-16 mr-16 icontool commhover c_888999"
              icon-class="ihangup"
              @click="handleSwitchIn(true)"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="转接"
            placement="top-start"
          >
            <svg-icon
              class-name="mr-16 icontool commhover c_888999"
              icon-class="izj"
              @click="handleOpen('transfer')"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="结束"
            placement="top-start"
          >
            <svg-icon
              class-name="mr-10 icontool2 commhover c_888999"
              icon-class="iclose"
            />
          </el-tooltip>
        </div>
      </div>
      <div class="textareabox">
        <el-input
          v-model="message"
          type="textarea"
          class="inputnobord"
          id="message"
          rows="5"
          placeholder="请输入内容"
        />
      </div>
      <div class="footbtns flexend">
        <el-button-group class="mr-20">
          <el-button size="small">结束对话</el-button>
          <el-button size="small">下一个未读</el-button>
        </el-button-group>
        <el-button type="primary" size="small" @click="sendMessage"
          >发送</el-button
        >
      </div>
    </template>
    <template v-else>
      <div class="w_full h_full flexcenter">
        <el-button
          type="primary"
          size="small"
          @click="handleSwitchIn(false)"
          class="mr-16"
          >主动接入</el-button
        >
        <el-tooltip
          class="item"
          effect="dark"
          content="转接"
          placement="top-start"
        >
          <svg-icon
            class-name="mr-16 icontool commhover c_888999"
            icon-class="izj"
            @click="handleOpen('transfer')"
          />
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="结束"
          placement="top-start"
        >
          <svg-icon
            class-name="mr-10 icontool2 commhover c_888999"
            icon-class="iclose"
          />
        </el-tooltip>
      </div>
    </template>
    <!-- 图文链接 -->
    <reply-link
      v-if="openlink"
      :visable.sync="openlink"
      title="添加链接"
      @submit="submitLink"
    />
    <!-- 素材库 -->
    <reply-material
      v-if="openmaterial"
      width="1200px"
      height="610px"
      :visable.sync="openmaterial"
      title="从素材库导入"
      @submit="submitMaterial"
    />
    <!-- 选择客户群 -->
    <SelectGroup v-if="opengroup" :visable.sync="opengroup" :gtype="2" />
    <!-- 转接  -->
    <transfer-session v-if="opentransfer" :visable.sync="opentransfer" />
  </div>
</template>
<script>
import EmojiPop from "@/components/EmojiPop";
import ReplyLink from "@/components/MaterialContent/ReplyLink.vue";
import ReplyMaterial from "@/components/MaterialContent/ReplyMaterial.vue";
import SelectGroup from "@/components/UserGroupComp/SelectGroup.vue";
import TransferSession from "./TransferSession.vue";
import { isOverSize } from '@/utils/validate';
export default {
  data() {
    return {
      message: "",
      isTip: false,
      openlink: false,
      opengroup: false,
      openmaterial: false,
      opentransfer: false,
    };
  },
  components: {
    EmojiPop,
    ReplyLink,
    SelectGroup,
    ReplyMaterial,
    TransferSession,
  },
  props: {
    type: {
      default: 1, // 1 为在线聊天  2为客服分发
    },
    ishangUp: {
      //是否为挂起
      default: false,
    },
  },
  methods: {
    //选择表情包
    chooseEmoji(icon) {
      var elInput = document.getElementById("message");
      var startPos = elInput.selectionStart;
      var endPos = elInput.selectionEnd;
      var text = elInput.value;
      if (startPos === undefined || endPos === undefined) {
        return;
      }
      var result =
        text.substring(0, startPos) + icon.name + text.substring(endPos);
      //重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + icon.name.length;
      elInput.selectionEnd = startPos + icon.name.length;
      elInput.value = result;
      this.message = result;
    },

    handleTip(val) {
      console.log("val:", val);
    },

    // 上传图片
    upload(event) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("photo", file);
      // uploadPhoto(formData).then((res) => {
      //   if (res.code == 1) {
      //     // console.log('图片：',res.data);
      //     this.$message.success("上传成功");
      //     let url = res.data.replace("\\", "/");
      //     this.form.photo = process.env.VUE_APP_BASE_API + "/" + url;
      //     document.getElementById("pageData").value = null;
      //   }
      // });
    },

    handleOpen(type) {
      switch (type) {
        case "link":
          this.openlink = true;
          break;
        case "group":
          this.opengroup = true;
          break;
        case "material":
          this.openmaterial = true;
          break;
        case "transfer":
          this.opentransfer = true;
          break;
        default:
          break;
      }
    },

    clearMessage() {
      this.message = "";
    },

    // 主动接入
    handleSwitchIn(val) {
      this.$emit("changeHangUp", val);
    },

    // 链接提交
    submitLink() {},

    // 素材提交
    submitMaterial() {},

    sendMessage() {
      if (!this.message.trim()) return;
      let item = {
        sendFrom: 1,
        type: "text",
        content: this.message,
        createTime: this.parseTime(new Date()),
      };
      console.log("发送消息：", item);
      //   this.sendChatItem(item)
      this.$emit("sendMessage", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.w_tool {
  //   height: 22px;
  padding: 10px;
}
.nobodersw {
  ::v-deep .el-switch__core {
    border-color: transparent !important;
    height: 18px;
    width: 35px !important;
  }
  ::v-deep .el-switch__core:after {
    width: 14px !important;
    height: 14px;
  }
}
.icontool {
  width: 20px;
  height: 20px;
}
.icontool2 {
  width: 16px;
  height: 16px;
}
.footbtns {
  padding: 10px 16px 16px;
}
.textareabox {
  position: relative;
  flex: 1 1;
}
.inputnobord {
  ::v-deep .el-textarea__inner {
    border: 0;
  }
}
.toolemj {
  ::v-deep .icontool {
    width: 19px !important;
    height: 19px !important;
    color: #888999;
  }
}
.uploadimg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
</style>